<!DOCTYPE html>
<html lang="zh_CN" class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>官方网站</title>
    <header th:replace="header::html"></header>
</head>
<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">菜单</a>
        <a>
          <cite>菜单列表</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="x-body">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <table class="layui-hide" id="table" lay-filter="member"></table>
                    </div>
                    <div class="layui-card-body ">
                        <script type="text/html" id="barDemo">
                            <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
                        </script>
                    </div>
                    <div class="layui-card-body ">
                        <script type="text/html" id="toolbarDemo">
                            <div class="layui-btn-container">
                                <button class="layui-btn" onclick="xadmin.open('新增信息','/client/addOrEdit/?id=0')"><i
                                        class="layui-icon">&#xe654;</i>新增菜单
                                </button>
                                <button class="layui-btn" onclick="xadmin.open('回收站','/client/recycle')"><i
                                        class="layui-icon">&#xe640;</i>回收站
                                </button>
                            </div>
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    layui.use('table', function () {
        $ = layui.jquery;
        var table = layui.table,
            form = layui.form;
        var tableIns = table.render({
            elem: '#table'
            , url: '/client/list' //数据接口
            , toolbar: '#toolbarDemo'
            , response: {
                dataName: 'datas' //规定数据列表的字段名称，默认：data
            }
            , cols: [
                [ //表头
                    {field: 'id', title: 'ID', sort: true, width: 80, align: "center"},
                    {field: 'title', title: '菜单名称'},
                    {field: 'href', title: '接口地址'},
                    {field: 'sort', title: '排序'},
                    { field: 'status', title: '状态', templet: function (d) {
                            if (d.status == '0') {
                                return '<span class="layui-badge layui-bg-gray">无效</span>';
                            }
                            return '<span class="layui-badge layui-bg-blue">有效</span>';
                        }},
                    {field: 'updateTime', title: '最后操作时间'},

                    {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 180}
                ]
            ],
            done: function () {
                checkPermission();
            }
        });

        //监听工具条
        table.on('tool(member)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么?', function (index) {
                    $.ajax({
                        url: "/client/delete",
                        type: "GET",
                        data: {id: data.id},
                        dataType: 'json',
                        success: function (result) {
                            if (result.code == 200) {
                                layer.alert("删除成功，已进入回收站", {icon: 1}, function (index1) {
                                    layer.close(index1);
                                    tableIns.reload();
                                });
                            } else {
                                layer.alert(result.msg);
                            }
                        },
                    });
                });
            } else if (obj.event === 'edit') {
                var id = data.id;//当前行的id
                xadmin.open('编辑信息', '/client/addOrEdit/?id=' + id);
            }
        })
    });
</script>
</body>
</html>

